<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name='viewport' content="width=device-width, initial-scale=1.0">
  	<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />
	<title>产品演示</title>
	<link rel="stylesheet" type="text/css" href="../resources/style/reset.css">
	<link rel="stylesheet" type="text/css" href="../resources/style/demonstration.css">
	<link rel="stylesheet" type="text/css" href="../resources/awe/awesome.css">
	<link rel="stylesheet" type="text/css" href="../resources/style/page.css">
</head>
<body>
	<div class="head">
		 <iframe src="./head.html?id=2" echo="1" frameborder="0" style="width:100%;height:170px;"></iframe>
	</div>
	<div class="head-box"></div>
	<div class="bainner" style="background-image: url(../resources/images/demonstration_banner_02.png);"></div>
	<div class="main">
		<div class="box contanner" id="article">
			
		</div>
	</div>
	<div class="footer">
		 <iframe src="./footer.html" frameborder="0" style="width:100%;height:360px;"></iframe>
	</div>
</body>
	<script type="text/javascript" src="../resources/js/jquery-1.9.1.min.js"></script>
	<script type ="text/javascript" src="../resources/js/tangram-min.js"></script>
	<script type ="text/javascript" src="../resources/js/tangram-ext.js"></script>
	<script type ="text/javascript" src="../resources/js/baiduTemplate.js"></script>
	<script type ="text/javascript" src="../resources/js/paging.js"></script>

	<script type="text/template" id="main">
		<div class="title" id="navBox">
		 	[%for(var i in subtitle){%]
				<b class="nav [%=i==0 ? 'active':''%]">[%=subtitle[i].text%]</b>
		 	[%}%]
		</div>
      	<div class="item-box clearfix">
	        [%for(var i in data){%]
	            <div class="flex-item">
	               <div class="flex-box">
	                   <div class="demonstration-demo" style="background-image:url(../resources/images/[%=data[i].imgsrc%])"></div>
	                   <p class="demonstration-title">[%=data[i].text%]</p>
	                   <div class="evaluate">
	                        <p>
	                           <a class="eye-count"><i class="fa fa-eye"></i>&nbsp;&nbsp;<b>[%=data[i].like%]</b></a>&nbsp;&nbsp;&nbsp;&nbsp;
	                           <a class="comment-count"><i class="fa fa-comment-o"></i>&nbsp;&nbsp;<b>[%=data[i].comment%]</b></a>
	                        </p>
	                        <p class="time">
	                          <b >[%=data[i].data%]</b>
	                        </p>
	                   </div>
	               </div>
	            </div>
	        [%}%]
      	</div>
		<div id="page" class="page_div"></div>
	</script>
	<script>
			var o_id=2;
			var json={
				"subtitle":[
						{"text":"ALL","id":""},
						{"text":"等级评审","id":""},
						{"text":"日常统计学","id":""}, 
						{"text":"质控报告","id":""},
						{"text":"管理者视图","id":""},
						{"text":"绩效考核","id":""}, 
						{"text":"不良事件","id":""}	
				 ],
		 		"data":[
		              {
		                "text":"等级评审系统操作演示",
		                "comment":"899",
		                "like":"233",
		                "data":"2017-12-12",
		                "imgsrc":"introduce_01.png"
		              },
		              {
		                "text":"不良事件系统操作演示",
		                "comment":"1929",
		                "like":"233",
		                "data":"2017-12-12",
		                "imgsrc":"introduce_02.png"
		              },
		              {
		                "text":"质控报告系统操作演示",
		                "comment":"1929",
		                "like":"233",
		                "data":"2017-12-12",
		                "imgsrc":"introduce_03.png"
		              },
		              {
		                "text":"管理者视图系统操作演示",
		                "comment":"1929",
		                "like":"233",
		                "data":"2017-12-12",
		                "imgsrc":"introduce_4.png"
		              },
		              {
		                "text":"绩效考核系统操作演示",
		                "comment":"1929",
		                "like":"233",
		                "data":"2017-12-12",
		                "imgsrc":"introduce_05.png"
		              },
		              {
		                "text":"日常统计学系统操作演示",
		                "comment":"1929",
		                "like":"233",
		                "data":"2017-12-12",
		                "imgsrc":"introduce_06.png"
		              }
		        ]
			}

			var options = {
					getArticle: function() {
						$("#article").html(baidu.template("main", json));
					},
					nav:function(el,id){
						if($(el).hasClass("active")) return ;
						$(".active").removeClass("active");
						$(el).addClass("active");
					}
			}
       		options.getArticle();

       		//分页
			$("#page").paging({
				pageNo:5,
				totalPage: 9,
				totalSize: 300,
				callback: function(num) {
					alert(num);
				}
			})

       		$("#navBox").on("click",".nav",function(){
       				options.nav(this);
       		})
	</script>
</html>